$(function () {
  左边点击事件()
  永久缓存();
  function 渲染() {
    $.ajax({
      type: "get",
      url: "categories",
      dataType: "json",
      success: function (res) {
        console.log(res);
        data = res.data;
        jsondata = JSON.stringify(data);
        localStorage.setItem("cates", jsondata);
        左边渲染();
        // 第一次渲染右边结构并且第0个索引的二层数据
        右边渲染(0);
        左边点击事件()
      }
    });
  }
  function 左边渲染() {
    $(".left>#wrapper").html(template("template1", data));
    left = new IScroll(".left>#wrapper");
  }
  function 右边渲染(index) {
    // 获取二层数据更具第0个索引获取第一次
    childrens = data[index].children;
    // 把右边结构使用二层数据添加到模板中生成
    $(".right").html(template("template2", { data: childrens }));
    // 判断是否所有图片已经加载完成后再初始化滑动插件防止出现BUG
    var time = $(".right img").length;
    $(".right img").on("load", function() {
      // 没加载完一个图片则进行长度--
      time--;
      if (time == 0) {
        var myScroll = new IScroll(".right");
      }
    });
  }
 
  function 左边点击事件() {
    $('.left').on('tap', 'li', function () {
      $(this)
        .addClass("active")
        .siblings()
        .removeClass("active");
      var index = $(this).index()
      右边渲染(index)
      // 给滑动插件设置一个点击左边滚动到顶上
      left.scrollToElement(this);
    })
  }
  function 永久缓存() {
    // 判断如果存在cates这个文件则优先调用这个文件渲染数据
    if (localStorage.getItem('cates')) {
      // 提取数据
      var strcates = localStorage.getItem('cates')
      // 转换成json对象
      data = JSON.parse(strcates)
      // 给与一个缓存过期时间并且判断是否过期
      if (Date.now() - data.time > 9999999 * 1000) {
        // 如果过期则再次发送请求
        渲染()
      } else {
        // 没有过期则直接调用data存起的第一次存储回来的数据
        左边渲染()
        右边渲染(0)
      }
    } else {
      渲染()
    }
  }

});

//1.设置AJAX请求数据
//2.声明全局变量a为空
//3.数据请求成功后把res.data赋值给全局变量a
//.4设置左边栏模板,把a数据传递过去模板生成结构,此时传递a只会是第一层数据被循环
//5.给每个左边栏的li注册委托点击事件,获取当前索引,同时使用排他法点击当前li高亮,其他还原,同时
//  声明一个全局变量childrens存储起 a[点击索引].二层数据 让他根据点击的li索引找到需要渲染的二层数据
//  同时调用封装好的右边栏的模板生成结构

//6.封装右边栏函数,同时声明一个全局变量存储起 a[点击索引].二层数据 把index变为参数用于在点击事件中调用
//  右边模板渲染时把点击事件中获取到的当前索引传入到调用的右边栏模板中，用于每次点击调用一次右边栏根据索引
//  生成索引的数据同时给与注册当所有图片加载完成后再初始化右边滑动事件，防止被初始化后图片还没加载完导致滑动
//  出现bug
//获取需要加载数据的长度
//判断本地缓存是否存在数据
